<template>
	<view class="u-wrap">
		<view class="u-search-box">
			<u-search 
				shape="square"
				:show-action="true" 
				action-text="搜索" 
				:clearabled="true"  
				:animation="true" 
				v-model="keywords"
				:disabled="true"
				@click="goSearch"
			></u-search>
		</view>
		<view class="container" :style="{'height':cateHeight+'px'}">
				<!-- left左侧一级分类列表 -->
				<scroll-view scroll-y class="left">
					<!-- 循环遍历的 -->
					<view class="left_list" 
						v-for="(item,index) in catelist" 
						:key="index" 
						:class="activeIndex==index?'active':''"
						@click="changecate(index)"
					>
						<text class="activeIndex" >{{item.catename}}</text>
					</view>
				</scroll-view>
				<!-- right右侧二级分类详情 -->
				<scroll-view scroll-y  class="right" :scroll-into-view="a">			
					<view class="right_box" :id="'id'+index" v-for="(item,index) in catelist" :key="index">
						<view class="row_title">{{item.catename}}</view>
						<view class="row">
							<view 
								class="row_list" 
								v-for="(m,i) in item.children" 
								:key="i" 
								@click="tolist(m.id)"
							>	
								<image :src="m.img" mode="widthFix"></image>
								<text>{{m.catename}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	
	// 引入分类测试数据
	import cateData from '@/utils/classify.data.js'
	
	export default {
		data() {
			return {
				a:'id0',//设置右侧默认置顶分类id
				activeIndex:0,//默认左侧分类选中下标
				cateHeight:'',//初始化分类容器高度
				catelist:cateData,//初始化分类数据
				keywords:''
			}
		},
		onLoad() {
			// 动态获取当前设备的高度
			this.cateHeight = uni.getSystemInfoSync().windowHeight;
			
			// 分类
			this.getcates()
		},
			
		methods:{
			// 去列表页
			 tolist(cateid){
				 uni.navigateTo({
					 url:`/pages/goodlist/goodlist?typr=2&cateid=${cateid}`
				 })
			 },
			  // changecate 点击一级分类
			  changecate(index){
				  this.activeIndex=index
				  this.a="id"+index
			  },
		      // http://localhost:3000/api/getcates 分类页面
			  async getcates(){
				  let [err,res]= await uni.request({
					  url:this.$baseUrl+"/api/getcates"
				  })
				  console.log(res)
				  if(err){
					  uni.showLoading({
						  title:"加载中。。。"
					  })
					  return
				  }
				  if(res.data.code!=200){
					  uni.showLoading({
						  title:"加载中。。。"
					  })
					  return
				  }
				  
				  // 图片格式
				  res.data.list.forEach(item=>{
					  if(item.children){
						  item.children.forEach(m=>{
							  m.img=this.$baseUrl+m.img
						  })
					  }
				  })
				  this.catelist=res.data.list
				  
			  }
			  
		}
	       
	}
</script>

<style lang="scss" scoped>
/* 引入样式 */
	@import url("@/static/css/cate.css");
	.active{
		background-color:#ffa74e;
	}
</style>
